
<body onselectstart="false">
  <div class="showTime">当前时间：{{timeText}}<span></span></div>
  <div class="container">
    <button style="background-color: black;" (click)="outBoundPage('NC')" >
      <div class="card">
        <div class="box">
          <div class="percent">
            <!-- <svg>
              <circle cx="70" cy="70" r="70"></circle>
              <circle cx="70" cy="70" r="70"  id="cid"></circle>
            </svg> -->
            <div class="number">
              <h2 style="color: rgb(253, 253, 253);">{{NCQty}}</h2>
            </div>
          </div>
          <h2 class="text">NC托盘数量</h2>
        </div>
      </div>
    </button>
    <button style="background-color: black;" (click)="outBoundPage('TC')" >
      <div class="card">
        <div class="box">
          <div class="percent">
            <!-- <svg>
              <circle cx="70" cy="70" r="70"></circle>
              <circle cx="70" cy="70" r="70"></circle>
            </svg> -->
            <div class="number">
              <h2 style="color: rgb(253, 253, 253);">{{TCQty}}</h2>
            </div>
          </div>
          <h2 class="text">TC托盘数量</h2>
        </div>
      </div>
    </button>
    <button style="background-color: black;" (click)="outBoundPage('SV')" >
      <div class="card">
        <div class="box">
          <div class="percent">
            <!-- <svg>
              <circle cx="70" cy="70" r="70"></circle>
              <circle cx="70" cy="70" r="70"></circle>
            </svg> -->
            <div class="number">
              <h2 style="color: rgb(253, 253, 253);">{{SVQty}}</h2>
            </div>
          </div>
          <h2 class="text">SV托盘数量</h2>
        </div>
      </div>
    </button>
    <button style="background-color: black;" (click)="outBoundPage('55')" >
      <div class="card">
        <div class="box">
          <div class="percent">
            <!-- <svg>
              <circle cx="70" cy="70" r="70"></circle>
              <circle cx="70" cy="70" r="70"></circle>
            </svg> -->
            <div class="number">
              <h2 style="color: rgb(253, 253, 253);">{{ZS550Qty}}</h2>
            </div>
          </div>
          <h2 class="text">550托盘数量</h2>
        </div>
      </div>
    </button>
    <button style="background-color: black;" (click)="outBoundPage('65')" >
      <div class="card">
        <div class="box">
          <div class="percent">
            <!-- <svg>
              <circle cx="70" cy="70" r="70"></circle>
              <circle cx="70" cy="70" r="70"></circle>
            </svg> -->
            <div class="number">
              <h2 style="color: rgb(253, 253, 253);">{{ZS650Qty}}</h2>
            </div>
          </div>
          <h2 class="text">650托盘数量</h2>
        </div>
      </div>
    </button>
  </div>
  <!-- <div style="position: absolute; top:45%; left:82%">
    <span style="color: rgb(255, 255, 255);font-wight:5px">请输入出库数量，最大值为9</span>
    <div style="position: absolute; background-color: aliceblue; width: 200px; height: 30px;">{{num}}</div>
  </div> -->
  <div class="mykb-box" id="mykeyboard" *ngIf="outPage">
      <div style="position: absolute; top:-15%; left:0%">
      <span style="color: rgb(255, 255, 255);font-size:15px;">请输入出库数量，最大值为9。当前托盘类型</span>
      <span style="color: rgb(87, 255, 9);font-size:35px;">{{tpType}}</span>
      <div style="position: absolute; background-color: aliceblue; width: 200px; height: 30px;"><span style="position: absolute;left: 47%;top: -15%; font-size: 25px; color:red; font-weight: 900;">{{num}}</span></div>
      </div>
    <ul class="num-key clearfix">
      <button style="background:none"><li class="num" (click)="numButton('1')">1</li></button>
      <button style="background:none"><li class="num" (click)="numButton('2')">2</li></button>
      <button style="background:none"><li class="num" (click)="numButton('3')">3</li></button>
      <button style="background:none"><li class="func exit" (click)="closeK()">退出</li></button>
      <button style="background:none"><li class="num" (click)="numButton('4')">4</li></button>
      <button style="background:none"><li class="num" (click)="numButton('5')">5</li></button>
      <button style="background:none"><li class="num" (click)="numButton('6')">6</li></button>
      <button style="background:none"><li class="func del" (click)="clearK()">退格</li></button>
      <button style="background:none"><li class="num" (click)="numButton('7')">7</li></button>
      <button style="background:none"><li class="num" (click)="numButton('8')">8</li></button>
      <button style="background:none"><li class="num"(click)="numButton('9')">9</li></button>
      <button style="background:none"><li class="func clearall" (click)="clearK()">清除</li></button>
      <button style="background:none"><li class="num">0</li></button>
      <button style="background:none"><li class="num">.</li></button>
      <button style="background:none"><li class="func sure" (click)="showConfirm()">确定</li></button>
    </ul>
  </div>
  <div style="position: absolute; top:60%; width:50%; height: 30%; background: none;left: 5%;">
    <nz-carousel nzAutoPlay [nzDotPosition]='carLocation' [nzEnableSwipe]>
      <div nz-carousel-content *ngFor="let index of array">
        <div style="color: rgb(5, 255, 25); position: absolute;top: 45%; left: 5%; font-size: 25px;" *ngIf="index == 1">{{runningTask}}</div>
        <div style="color: rgb(5, 255, 25); position: absolute;top: 45%; left: 5%; font-size: 25px;" *ngIf="index == 2">{{bufferTask}}</div>
        <div style="color: rgb(5, 255, 25); position: absolute;top: 45%; left: 5%; font-size: 25px;" *ngIf="index == 3">{{timeText}}</div>
      </div>
    </nz-carousel>
  </div>
  <button class="css_btn_cancle" (click)="cancelTaskButton()">取消出库任务</button>
  <nz-modal [(nzVisible)]="confirm"  (nzOnCancel)="handleCancel()" [nzOkText]=null nzWidth=50% nzCentered>
    <ng-container *nzModalContent>
      <div nz-row style="height: 100px;">
        <div nz-col nzSpan="4"><img style="position: absolute; size: 90%; height: 90%;" src="assets/警示.svg" ></div>
        <div nz-col nzSpan="20"><span style="position: absolute; font-size: 32px; line-height: 44px;top: 25%;">将进行
          <span style="color: red;">{{num}}</span>个
          <span style="color: red;">{{tpType}}</span>类型的托盘出库，是否继续？</span></div>
      </div>
    </ng-container>
    <div *nzModalFooter>
      <div nz-row style="height: 80px;">
        <div nz-col nzSpan="6"></div>
        <div nz-col nzSpan="6"></div>
        <div nz-col nzSpan="6">
          <button nz-button nzType="default" (click)="handleCancel()" class="okandcancle">取消</button>
        </div>
        <div nz-col nzSpan="6">
          <button nz-button nzType="primary" (click)="ConfirmOutBound()" class="okandcancle">继续</button>
        </div>
      </div>
    </div>
  </nz-modal>
  <nz-modal [(nzVisible)]="cancelConfirm"  (nzOnCancel)="handleCancel()" [nzOkText]=null nzWidth=50% nzCentered>
    <ng-container *nzModalContent>
      <div nz-row style="height: 100px;">
        <div nz-col nzSpan="4"><img style="position: absolute; size: 90%; height: 90%;" src="assets/警示.svg" ></div>
        <div nz-col nzSpan="20"><span style="position: absolute; font-size: 32px; line-height: 44px;top: 25%;">是否出库队列中的任务，该操作不影响正在出库的托盘</span></div>
      </div>
    </ng-container>
    <div *nzModalFooter>
      <div nz-row style="height: 80px;">
        <div nz-col nzSpan="6"></div>
        <div nz-col nzSpan="6"></div>
        <div nz-col nzSpan="6">
          <button nz-button nzType="default" (click)="handleCancel()" class="okandcancle">否</button>
        </div>
        <div nz-col nzSpan="6">
          <button nz-button nzType="primary" (click)="ConfirmCancel()" class="okandcancle">是</button>
        </div>
      </div>
    </div>
  </nz-modal>

</body>
